<template>
  <el-row>
    <div style="border: 1px solid #ccc;">
      <el-form ref="form" :inline="true" :model="notice" label-width="80px" style="margin-bottom: -15px">
        <el-form-item label="标题">
          <el-input v-model="notice.title"  size="small"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select v-model="notice.type" placeholder="请选择" size="small">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <Toolbar
          style="border-bottom: 1px solid #ccc"
          :editor="editor"
          :defaultConfig="toolbarConfig"
          :mode="mode"
      />
      <Editor
          style="height: 350px; overflow-y: hidden"
          :defaultConfig="editorConfig"
          v-model="html"
          @onChange="onChange"
          @onCreated="onCreated"
      />
    </div>
    <div style="margin: 10px 0px -15px 0px;display: flex;justify-content: center;">
      <el-button type="primary" size="small" @click="add">确认</el-button>
      <el-button type="primary" size="small" @click="noUpdate">取消</el-button>
    </div>
  </el-row>
</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default {
  components: { Editor, Toolbar },
  name: "notice-info",
  props:['info','displayType'],
  data() {
    return {
      notice:{
        title:"",
        type:""
      },
      options: [{
        value: '已发布',
        label: '已发布'
      }, {
        value: '草稿',
        label: '草稿'
      }],
      editor: null,
      html: "<p>999</p>",
      toolbarConfig: {
        // toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],
        // excludeKeys: [ /* 隐藏哪些菜单 */ ],
      },
      editorConfig: {
        placeholder: "请输入内容...",
        // autoFocus: false,
        // 所有的菜单配置，都要在 MENU_CONF 属性下
        MENU_CONF: {},
      },
      mode: 'default'
    };
  },
  methods: {
    add(){
      this.sa.loading("添加公告中")
      const editor = this.editor;
      if (editor == null) return;
      this.notice.content=editor.getText();
      this.notice.html=editor.getHtml();
      let params=this.notice
      this.request('/api/notice/add',params).then(res=>{
        if(!res) {return}
        this.sa.hideloading()
        this.$bus.$emit('addNotice')
        this.$message.success("添加成功")
      })
    },
    update(){
      this.sa.loading("修改公告中")
      const editor = this.editor;
      if (editor == null) return;
      this.notice.content=editor.getText();
      this.notice.html=editor.getHtml();
      let params=this.notice
      this.request('/api/notice/update',params).then(res=>{
        if(!res) {return}
        this.sa.hideloading()
        this.$bus.$emit('addNotice')
        this.$message.success("添加成功")
      })
    },
    onCreated(editor) {
      this.editor = Object.seal(editor); // 【注意】一定要用 Object.seal() 否则会报错
    },
    onChange(editor) {
      //console.log("onChange", editor.getHtml()); // onChange 时获取编辑器最新内容
    },
    //取消修改
    noUpdate(){
      this.$bus.$emit("noUpdate")
    }
  },
  mounted() {
    if(this.displayType=='edit'){
      this.notice=JSON.parse(this.info);
      //这步还真得延时执行，如果直接复制会被data里的html的赋值给覆盖掉
      setTimeout(() => {
        this.html = this.notice.html
      }, 1500)
    }
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁 editor ，重要！！！
  }
}
</script>

<style src="@wangeditor/editor/dist/css/style.css">
.commitBtn {
  margin-top: 10px;
}
</style>